<template>
	<view class="btn-tpl-box">
		<button class="cancel-btn" v-if="cancel" hover-class="hoverClass" @click="_cancelEvent">
			<slot name="cancel"></slot>
		</button>
		<button class="edit-btn" v-if="edit" hover-class="hoverClass" @click="_confirmEdit">
			<slot name="edit"></slot>
		</button>
		<button :class="{'min-btn': cancel || edit}" hover-class="hoverClass" @click="_confirmEvent">
			<slot></slot>
		</button>
	</view>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				value: "提 交"
			},
			cancel: {
				type: Boolean,
				value: false
			},
			edit: {
				type: Boolean,
				value: false
			}
		},
		methods: {
			//点击确定
			_confirmEvent() {
				//触发成功回调
				this.$emit("confirmEvent");
			},
			//点击取消
			_cancelEvent() {
				//触发成功回调
				this.$emit("cancelEvent");
			},
			//点击编辑
			_confirmEdit() {
				//触发成功回调
				this.$emit("confirmEdit");
			}
		}
	}
</script>

<style lang="less">
	.btn-tpl-box {
		width: 100vw;
		height: 186rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background: #fff;
		box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.08);
		z-index: 5;

		button {
			width: calc(100vw - 60rpx);
			margin: 30rpx 30rpx 0;
			background: #E41805;
			border-radius: 5px;
			color: #fff;
			font-size: 30rpx;
			display: inline-block;
			vertical-align: text-top;
			height: 90rpx;
			line-height: 90rpx;
		}

		.cancel-btn {
			width: 240rpx;
			color: #D13421;
			background-color: #fff;
			border: 2rpx solid #D13421;
		}

		.min-btn {
			width: 385rpx;
			float: right;
		}

		.edit-btn {
			width: 240rpx;
			color: #D13421;
			background-color: #fff;
			border: 2rpx solid #D13421;
		}
	}


	.hoverClass[type=myType] {
		opacity: 0.6 !important;
	}
</style>
